<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!--如果是IE 就以标准渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- 视窗——————响应式布局 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

    <!--当前页面的三要素-->
    <title>运维系统</title>
    <meta name="description" content="聚能优电" />
    <meta http-equiv="keywords" content="聚能优电" />

    <script type="text/javascript" src="./js/verify.js"></script>

    <!-- css -->
    <link rel="stylesheet" type="text/css" href="./css/common/common.css" />
    <link rel="stylesheet" type="text/css" href="./css/mainmonitor.css" />
    <style>
        .mainmonitor_screen .sb_tit{
            margin-top:1.55rem;
            font-size:0;
            width:100%;
            
        }
        .mainmonitor_screen .sb_tit #selectsx{
            vertical-align: top;
            width: 26%;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            font-family: SourceHanSansCN;
            letter-spacing: 0;
            font-weight: 400;
            background: #0167FF;
            color: #fff;
            border-right:1px solid #000;
            border-top-left-radius: 31px;
            border-bottom-left-radius: 31px;
            padding-left: 0.2rem;
        }
        .mainmonitor_screen .sb_tit #inputcon{
            vertical-align: top;
            width:45%;
            height: 28px;
            line-height: 30px;
            text-align: center;
            text-align-last: center;
            font-size: 12px;
            font-family: SourceHanSansCN;
            letter-spacing: 0;
            font-weight: 400;
            background: transparent;
            color: #536680;
            background: transparent;
            border: 1px solid rgba(1,103,255,0.3);
            border-top-right-radius: 31px;
            border-bottom-right-radius: 31px;
        }
        .mainmonitor_screen .sb_tit #selectstate{
            vertical-align: top;
            width:45%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            text-align-last: center;
            font-size: 12px;
            font-family: SourceHanSansCN;
            letter-spacing: 0;
            font-weight: 400;
            color: #fff;
            background: #0167FF;
            /* border: 2px solid rgba(1,103,255,0.3); */
            border-top-right-radius: 31px;
            border-bottom-right-radius: 31px;
        }
        .mainmonitor_screen .sb_tit .tosearch{
            vertical-align: top;
            display:inline-block;
            font-size: 14px;
            width: 1.2rem;
            height:0.6rem;
            margin-left:10px;
            border-radius: 30px;
            color:#fff;
            background:url('./images/search.svg') no-repeat center/contain;
        }

        .mainmonitor_screen .showtxt{
            width: 100%;
            /* height: 36px; */
            margin-top: 0.35rem;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #7F94B2;
            letter-spacing: 0;
            line-height: 18px;
            font-weight: 400;
        }



        .mainmonitor_screen #project_list.m_list{
            margin-top:0.35rem;
        }
        #project_list .l_con.l_list .xmdata{
            border:none;
        }
        #project_list .l_con.l_list .topborder{
            border-top:1px dashed #203C71;
        }

        #project_list .l_con.l_list .xmtit{
            position:relative;
            height:0.7rem;
        }
        #project_list .l_con.l_list .xmtit span{
            position:absolute;
            font-family: SourceHanSansCN-Regular;
            font-size: 14px;
            letter-spacing: 1.75px;
            font-weight: 400;
        } 
        #project_list .l_con.l_list .xmtit span.titleft{
            left:0;
            color: #D0E0FF;
        }
        #project_list .l_con.l_list .xmtit span.titright{
            right:0;
            color: #5297FF;
        }
        .mainmonitor_screen #project_list.m_list .l_con.l_list .xmdata{
            height:0.3rem;
        }
        .mainmonitor_screen #project_list.m_list .l_con.l_list .xmdata span{
            font-family: SourceHanSansCN-Regular;
            font-size: 12px;
            color: #7F94B2;
            letter-spacing: 1.5px;
            line-height: 18px;
            font-weight: 400;
        }
        .mainmonitor_screen #project_list.m_list .l_con.l_list .xmdata span.data_tit{
            margin-right:0.1rem;
        }
    </style>

</head>

<body>
    <div id="container" class="mainmonitor">
        <div class="mainmonitor_01">
            <!--主屏内容-->
            <div class="mainmonitor_screen">
                <div class="m_title">
                    <a href="JavaScript:history.go(-1);" class="back">
                        <img src="./images/back.svg" alt="">
                    </a>
                    <span class="tit">资产登记</span>
                </div>

                <div class="sb_tit">
                    <select id="selectsx" value="">
                        <option value="0" selected>请选择</option>
                        <option value="1">按名称</option>
                        <option value="2">按编码</option>
                        <option value="3">按项目</option>
                        <option value="4">按状态</option>
                    </select>
                    <input type="text" placeholder="请输入搜索内容" id="inputcon" />
                    <select id="selectstate" value="" style="display:none;">
                        <option value="0" selected>请选择</option>
                        <option value="1">闲置</option>
                        <option value="2">运行</option>
                        <option value="3">故障</option>
                        <option value="4">报废</option>
                    </select>
                    <span class="tosearch" id="tosearch"></span>
                </div>

                <div class="showtxt" id="showtxt">
                    目前共有智能微网电站105台，其中，正在运行的有79台,闲置的有26台
                </div>
                <div class="m_list" id="project_list">
                    <!-- <div class="l_con l_list">
                        <div class="xmicon"><div class="xmcon"></div></div>

                        <div class="xmtit">
                            <span class="titleft">发电机组</span>
                            <span class="titright">详情</span>
                        </div>

                        <div class="xmdata topborder">
                            <span class="data_tit">正&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;常：</span>
                            <span class="data_con"> NSDG-400-XXX</span>
                        </div>

                        <div class="xmdata">
                            <span class="data_tit">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</span>
                            <span class="data_con">在用</span>
                        </div>

                        <div class="xmdata">
                            <span class="data_tit">所属项目：</span>
                            <span class="data_con">XXXXXXXXX</span>
                        </div>
                    </div> -->


                </div>

            </div>
        </div>
    </div>


    <script>
        (function (win, doc) {
            var docEl = doc.documentElement || document.body; //获取HTML标签

            var container = doc.getElementById("container"); //container元素
            //判断是移动端设备还是PC,移动 就采用'orientationchange',横竖屏事件，PC端就采用onresize，窗口改变时间
            var resize = "onorientationchange" in win ? "orientationchange" : "resize";

            function rem() {
                docEl.style.fontSize = 100 * (container.clientWidth / 750) + "px";
            }

            //监听'DOMContent事件:DOM加载完成执行,如果DOMContent事件，那么执行rem函数
            doc.addEventListener("DOMContentLoaded", rem, false);

            //win下监听resize事件,如果resize事件，那么执行rem函数
            win.addEventListener(resize, rem, false);
        })(window, document);
    </script>

    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="./layer/layer.js"></script>
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://112.74.169.99:21021/api/services/app/AssetService/GetAssetInfoCount",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
                    xhr.setRequestHeader("Authorization", accessToken);
                    xhr.setRequestHeader('.AspNetCore.Culture', 'zh-Hans');
                },
                success: function (res) {
                    if(res.success){
                        $("#showtxt").html(``);
                        $("#showtxt").append( res.result );
                    }
                },
                error: function (err) {
                    console.log("数据请求失败");
                }
            });




            $.ajax({
                type: "GET",
                url: "http://112.74.169.99:21021/api/services/app/AssetService/GetAssetInfos",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
                    xhr.setRequestHeader("Authorization", accessToken);
                    xhr.setRequestHeader('.AspNetCore.Culture', 'zh-Hans');
                },
                success: function (res) {
                    $("#project_list").html(``);
                    $("#project_list").append(eachproject(res.result));
                },
                error: function (err) {
                    console.log("项目数据 请求失败");
                }
            });

        });


        var selectsx = $("#selectsx option:selected").attr('value');
        if(selectsx == 4){
            $("#selectstate").show();
            $("#inputcon").hide();
        }else{
            $("#selectstate").hide();
            $("#inputcon").show();
        }
        $("#selectsx").change(function () {
            var selectsxchose = $("#selectsx option:selected").attr('value');
            if(selectsxchose==4){
                $("#selectstate").show();
                $("#inputcon").hide();
            }else{
                $("#selectstate").hide();
                $("#inputcon").show();
            }
        });

        $("#tosearch").click(function(){
            if($("#selectsx option:selected").attr('value') == 0){
                layer.msg('请选择属性', {
                    icon: 3,
                    time: 1000 //1秒关闭（如果不配置，默认是3秒）
                    }
                );
            }else{
                if($("#selectsx option:selected").attr('value') == 4){
                    if( $("#selectstate option:selected").attr('value') == 0){
                        layer.msg('请选择搜索状态', {
                            icon: 3,
                            time: 1000 //1秒关闭（如果不配置，默认是3秒）
                            }
                        );
                    }else{
                        var params = {
                            type: $("#selectsx option:selected").attr('value'),
                            search: $("#selectstate option:selected").attr('value')
                        };
                        $.ajax({
                            type: "GET",
                            url: "http://112.74.169.99:21021/api/services/app/AssetService/GetAssetInfoBySearch?type=" + params.type + "&search=" + params.search,
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
                                xhr.setRequestHeader("Authorization", accessToken);
                                xhr.setRequestHeader('.AspNetCore.Culture', 'zh-Hans');
                            },
                            success: function (res) {
                                if(res.result != null){
                                    $("#project_list").html(``);
                                    $("#project_list").append(eachproject(res.result));
                                }else{
                                    $("#project_list").html(`没有搜索到`);
                                    $("#project_list").css("color","#D0E0FF").css("font-size","18px");
                                }
                                
                            },
                            error: function (err) {
                                console.log("项目数据 请求失败");
                            }
                        });
                    }
                }else{
                    if( !$("#inputcon").val()){
                        layer.msg('请输入搜索信息', {
                            icon: 3,
                            time: 1000 //1秒关闭（如果不配置，默认是3秒）
                            }
                        );
                    }else{
                        var params = {
                            type: $("#selectsx option:selected").attr('value'),
                            search: $("#inputcon").val()
                        };
                        $.ajax({
                            type: "GET",
                            url: "http://112.74.169.99:21021/api/services/app/AssetService/GetAssetInfoBySearch?type=" + params.type + "&search=" + params.search,
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
                                xhr.setRequestHeader("Authorization", accessToken);
                                xhr.setRequestHeader('.AspNetCore.Culture', 'zh-Hans');
                            },
                            success: function (res) {
                                if(res.result != null){
                                    $("#project_list").html(``);
                                    $("#project_list").append(eachproject(res.result));
                                }else{
                                    $("#project_list").html(`没有搜索到`);
                                    $("#project_list").css("color","#D0E0FF").css("font-size","18px");
                                }
                            },
                            error: function (err) {
                                console.log("项目数据 请求失败");
                            }
                        });
                    }
                }
            }

        });










        function eachproject(obj) {
            var str = ``;
            if (obj.constructor == Array) {
                for (var i = 0; i < obj.length; i++) {
                str += `<div class="l_con l_list">`;
                    str += `<div class="xmicon"><div class="xmcon"></div></div>`;
                    str += `<div class="xmtit">`;
                        str += `<span class="titleft">` + obj[i].devCN + `</span>`;
                        str += `<span class="titright" onclick="window.location.href='/assets/assetsdetail.html?id=` + obj[i].id + `'">详情</span>`;
                    str += `</div>`;
                    
                    str += `<div class="xmdata topborder">`;
                        str += `<span class="data_tit">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span>`;
                        str += `<span class="data_con">` + obj[i].deviceCode + `</span>`;
                    str += `</div>`;

                    if(obj[i].devicestate == 1){
                        obj[i].devicestate = '闲置';
                    }else if(obj[i].devicestate == 2){
                        obj[i].devicestate = '运行';
                    }else if(obj[i].devicestate == 3){
                        obj[i].devicestate = '故障';
                    }else if(obj[i].devicestate == 4){
                        obj[i].devicestate = '报废';
                    }
                    str += `<div class="xmdata">`;
                        str += `<span class="data_tit">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</span>`;
                        str += `<span class="data_con">` + obj[i].devicestate + `</span>`;
                    str += `</div>`;

                    str += `<div class="xmdata">`;
                        str += `<span class="data_tit">所属项目：</span>`;
                        str += `<span class="data_con">` + obj[i].projectName + `</span>`;
                    str += `</div>`;
                str += `</div>`;

                }
                return str;
            }
        }
    </script>


</body>

</html>